<!-- 自定义 icon 和文字-->
<template>
  <div class="m-icon-text grid ml-4">
    <div class="m-icon-div ">
      <i role="img" class="m-icon">
        <slot name="svg"></slot>
      </i>
    </div>
    <div class="m-text-div ml-2 " :class="props.textClass"
         :style="props.textStyle">
      {{ props.text }}
    </div>
  </div>
</template>

<script lang="ts" setup>
interface IconTextProps {
  text: string,
  textClass?: string,
  textStyle?: string
}

const props = withDefaults(defineProps<IconTextProps>(), {
  text: '',
  textClass: '',
  textStyle: ''
});
</script>

<style lang="less" scoped>
.m-icon-text {
  margin-left: 0px;
}

.m-icon-div {
  grid-area: icon;
  color: rgb(31, 34, 37);
  transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), font-size .3s cubic-bezier(0.4, 0, 0.2, 1), margin-right .3s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.m-text-div {
  grid-area: content;
  transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), opacity .3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgb(51, 54, 57);
}
</style>
